<template>
    <div class="home">
        <div class="top">
            <div class="top_left">
                <div class="topleft_top">
                    <div class="left">
                        <h2>
                            工单统计
                            <span class="time">2023.1.1 ~ {{ tt }}</span>
                        </h2>
                        <div class="left_div">
                            <div>
                                <p>31</p>
                                <p>工单总数（个）</p>
                            </div>
                            <div>
                                <p>0</p>
                                <p>完成工单（个）</p>
                            </div>
                            <div>
                                <p>0</p>
                                <p>进行工单（个）</p>
                            </div>
                            <div>
                                <p>30</p>
                                <p>取消工单（个）</p>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <h2>
                            销售统计
                            <span class="time">2023.1.1 ~ {{ tt }}</span>
                        </h2>
                        <div class="right_div">
                            <div>
                                <p>2333</p>
                                <p>订单量（个）</p>
                            </div>
                            <div>
                                <p>1.56</p>
                                <p>销售额（万元）</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="topleft_dow">
                    <h2>
                        销售统计
                        <span class="time">2023.1.1 ~ {{ tt }}</span>
                        <p>
                            <span @click="putnum(1)" :class="num===1?'span':'se'">周</span>
                            <span @click="putnum(2)" :class="num===2?'span':'se'">月</span>
                            <span @click="putnum(3)" :class="num===3?'span':'se'">年</span>
                        </p>
                    </h2>
                </div>
            </div>
            <div class="top_right">
                <h2>
                    工单统计
                    <span class="time">2023.1.1 ~ {{ tt }}</span>
                </h2>
            </div>
        </div>
        <div class="dow">
            <div class="dow_left">
                <h2>
                    合作商点位数Top5
                    <span class="time">2023.1.1 ~ {{ tt }}</span>
                    <p class="cc">
                        <EllipsisOutlined />
                    </p>
                </h2>
            </div>
            <div class="dow_right">
                <h2>
                    异常设备监控
                    <span class="time">2023.1.1 ~ {{ tt }}</span>
                    <p class="cc">
                        <EllipsisOutlined />
                    </p>
                </h2>
                <div>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted,ref,onUnmounted } from 'vue'
import {EllipsisOutlined} from '@ant-design/icons-vue'
let tt=ref('')
var time=null
let num = ref(1)

const putnum = (i)=>{
    num.value=i
}

onMounted(()=>{
    let date = new Date()
    tt.value=`${date.getFullYear()}.${date.getUTCMonth()+1}.${date.getDate()}`
    time = setInterval(()=>{
        let day = date.getDate()
        let year = date.getFullYear()
        let month = date.getUTCMonth()+1
        tt.value= `${year}.${month}.${day}`
    },1000)
})
onUnmounted(()=>{
    clearInterval(time)
})

</script>

<style scoped>
.home{
    /* overflow: auto; */
    height: 100vh;
}
.top{
    height: 68%;
    margin-bottom: 20px;
    display: flex;
}
.top_left{
    flex: 3;
    border-radius: 25px;
}
.top_right{
    flex:1;
    margin-left: 20px;
    border-radius: 25px;
    background-color: white;
    padding: 20px;
}
.dow{
    height: 30%;
    display: flex;
}
.dow_left{
    flex: 2;
    border-radius: 25px;
    padding: 20px;
    background-color: white;
}
.dow_right{
    flex:1.5;
    margin-left: 20px;
    border-radius: 25px;
    padding: 20px;
    background-color: white;
}
.topleft_top{
    height: 38%;
    margin-bottom: 20px;
    /* background-color: aliceblue; */
    display: flex;
}
.left{
    border-radius: 25px;
    flex: 1.5;
    padding: 20px;
    background: #e9f3ff;
    background-image: url(../../../public/下载.png),url(../../../public/task.66b715b7.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
}
.left_div{
    height: 80%;
    display: flex;
}
.left_div div{
    flex: 1;
    height: 100%;
    text-align: left;
    padding: 30px 20px;
    /* background-color: rgb(193, 155, 232); */
}
.left_div div p:nth-child(1){
    height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-shadow: 2px 4px 7px rgba(85,132,255,.5);
    color: #072074;
    margin-bottom: 0;
}
.left_div div p:nth-child(2){
    height: 20px;
    font-size: 12px;
    color: #91a7dc;
}
.right{
    flex: 1;
    margin-left: 20px;
    border-radius: 25px;
    padding: 20px;
    background: #fbefe8 url(../../../public/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
}
.right_div{
    height: 80%;
    display: flex;
}
.right_div div{
    flex: 1;
    height: 100%;
    text-align: center;
    padding: 30px 0;
    /* background-color: rgb(193, 155, 232); */
}
.right_div div p:nth-child(1){
    height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
    color: #ff5757;
    margin-bottom: 0;
}
.right_div div p:nth-child(2){
    height: 20px;
    font-size: 12px;
    color: #de9690;
}
.topleft_dow{
    height: 58%;
    border-radius: 25px;
    padding: 20px;
    background-color: white;
}
h2 p{
    width: 140px;
    padding: 8px 20px;
    border-radius: 10px;
    float: right;
    text-align: center;
    background-color:#e9f3ff;
    display: flex;
}
.topleft_dow h2 p .span{
    flex: 1;
    font-size: 15px;
    border-radius: 10px;
    padding: 0 5px;
    background-color: white;
}
.topleft_dow h2 p .se{
    flex: 1;
    font-size: 15px;
    padding: 0 5px;
    border-radius: 10px;
    font-weight: 500;
}
h2{
    font-weight: 700;
    font-size: 17px;
}
.time{
    color: rgb(145, 145, 145);
    font-size: 12px;
    margin-left: 10px;
}
.cc{
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 1px solid blue;
    border-radius: 25px;
    color: blue;
}
</style>